<template>
<div class="bg">
  <div class="container ">
    <v-card rounded="lg" elevation="2"
     class="card my-10 mb-3 py-5" style="max-width: 600px;">
      <div class="container box container--fluid">
        <div class="tit text-center mb-10">Enter your code below to get started</div>
        <v-text-field ref="input" v-model="ticketNo" solo label="Code"></v-text-field>
        <div class="text-right">
          <v-btn color="red lighten-1"
           class="white-text" raised width="120" @click="submit">redeem</v-btn>
        </div>
      </div>
    </v-card>
  </div>
</div>
</template>

<script>
import Vue from 'vue';
import { getCarTicket } from '@/api/user';
import { ERROR_OK } from '@/api/config';

export default Vue.extend({
  name: 'UserRedeem',
  data() {
    return {
      ticketNo: '',
    };
  },
  methods: {
    submit() {
      if (!this.ticketNo) {
        this.$refs.input.focus();
        return;
      }
      getCarTicket({ ticketNo: this.ticketNo }).then((res) => {
        if (res.code === ERROR_OK) {
          this.$router.push({ name: 'UserService' });
        }
      });
    },
  },
});
</script>

<style scoped lang ="scss">
.bg {
  height: 100%;
  background: linear-gradient(#ef5350,#1989fa);
}
.card {
  .tit {
    color: #EF5350;
  }
  margin: 0 auto;
  .white-text {
    color: #fff;
  }
}
</style>
